<template>
	<view class="box" style="flex-direction: column;">
		<view v-if="showNotice">
			<uni-notice-bar  showIcon="true" single text="首次登录需要填写昵称 性别 头像"></uni-notice-bar>
		</view>
		<view class="card">
			<form>
				<view class="box" style="width: 100%;">
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="onChooseAvatar">
						<u-image class="avatar" :src="userInfo.avatar" mode="heightFix" ></u-image>
					</button>
				</view>
				<view class="row">
					<view>昵称</view>
					<input class="ltr_input" type="nickname"  placeholder="请输入昵称" @blur="setUsername" :value="userInfo.username"/>
				</view>
				<u-line></u-line>

				<view class="row">
					<view>性别</view>
					<view class="right" v-if="userInfo.gender==0">
						<picker mode="selector" @change="bindPickerChange" :value="userInfo.gender" :range="genderArr" range-key="name" :disabled="false">
							<view class="box">
								<!-- <input class="ltr_input" name="gender" :value="userInfo.gender" border="none" disabled></input> -->
								<view class="right-text">未知</view>
								<uni-icons type="right" size="18" color="#8d8c8c"></uni-icons>
							</view>
						</picker>
					</view>
					<view class="right" v-else>
						<view class="box">
							<view class="right-text" v-if="userInfo.gender==1">男</view>
							<view class="right-text" v-else>女</view>
						</view>
					</view>
				</view>
				<u-line></u-line>
				<view class="row">
					<view>地址</view>
					<view class="right">
						<picker mode='region' @change="chooseregion">
							<view class="box">
								<!-- <input class="ltr_input" name="region" :value="userInfo.region" border="none" placeholder="请选择省市区" disabled></input> -->
								<view class="right-text">{{userInfo.region}}</view>
								<uni-icons type="right" size="18" color="#8d8c8c"></uni-icons>
							</view>
						</picker>
					</view>
				</view>
			</form>
		</view>
		
		<view style="width: 80%;">
			<u-button text="确认提交" shape="circle" type="primary"  @click="submit"></u-button>
		</view>
		
	</view>
</template>

<script>
	import {
		logout,
		setUserAddress,
		setUserInfo
	} from "../../api/login";
import { ossImage, ossImageAliYun } from "../../utils/upload";
	export default {
		data() {
			return {
				userInfo: {
					userId: 414570,
					username: '微信用户',
					region: '未设置',
					avatar: "https://goeasy-im2-1302606804.cos.ap-guangzhou.myqcloud.com/avatar/xiaomei.jpg",
					gender: 0, //用户性别，0: 未知；1:男性；2:女性
				},
				genderArr: [{
						name: '男',
						value: 1
					},
					{
						name: '女',
						value: 2
					}
				],
				showNotice: true
			}
		},
		onLoad(option) {
			let info = JSON.parse(decodeURIComponent(option.item));
			if (info) {
				this.userInfo.userId = info.userId
				this.userInfo.username = info.username
				this.userInfo.region = info.region
				this.userInfo.avatar = info.avatar
				this.userInfo.gender = info.gender
				this.showNotice = info.gender == 0 ? true : false
				console.log('showNotice', this.showNotice)
			}
			uni.$on('setRegion', (obj) => {
				this.userInfo.region = obj.region
			})
		},
		onUnload() {
			uni.$off('setRegion')
		},
		methods: {
			chooseregion(event) {
				let addrStr = event.detail.value.toString()
				this.userInfo.region = addrStr.replace(/,/g, '')
			},
			setUsername(e) {
				this.userInfo.username = e.detail.value
			},
			bindPickerChange(e) {
				console.log(this.userInfo)
				console.log('picker发送选择改变，携带值为', e.detail.value)
				let index = e.detail.value
				let that = this
				uni.showModal({
					title: '提示',
					content: '性别设置后不可再更改哦',
					success: function(res) {
						if (res.confirm) {
							that.userInfo.gender = that.genderArr[index].value
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			
			onChooseAvatar(e) {
				var tempFilePath  = e.detail.avatarUrl
				// ossImage(tempFilePath).then(res => {
				// 	console.log("上传成功", res)
				// 	this.userInfo.avatar = res
				// }).catch(err => {
				// 	console.log("上传失败", err)
				// })
				ossImageAliYun(1, tempFilePath).then(res => {
					this.userInfo.avatar = res
				}).catch(err => {
					console.log("上传失败")
				})
				
			},
			submit() {
				if (this.userInfo.username == "") {
					uni.showToast({
						"title": "昵称不能为空",
						"icon": "error"
					})
					return
				}
				if (this.userInfo.gender == 0) {
					uni.showToast({
						"title": "请选择性别哦",
						"icon": "error"
					})
					return
				}
				setUserInfo({
					id: uni.getStorageSync("userId"),
					username: this.userInfo.username,
					avatar: this.userInfo.avatar,
					gender: this.userInfo.gender,
					region: this.userInfo.region
				}).then(res => {
					uni.setStorageSync("userInfo", res.data)
					uni.showToast({
						title: '设置成功',
						'icon': 'success'
					})
					setTimeout(()=> {
						uni.reLaunch({
							url: "/pages/userHome/userHome",
							success: function(res) {
								
							}
						});
					}, 1500)
				}).catch(err => {
					console.log("上报失败", err)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.card {
		width: 80%;
		height: 500rpx;
		margin-top: 100rpx;
		border-radius: 50rpx;
		padding: 20rpx;
	}

	.row {
		display: flex;
		justify-content: space-between;
		padding-top: 20rpx;
		padding-bottom: 10rpx;

		.ltr_input {
			text-align: right;
			direction: ltr;
		}
	}

	.right-text {
		font-size: 30rpx;
	}

	.box {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.avatar-wrapper {
		border: none !important;
		width: 200rpx;
		height: 200rpx;
		padding: 0 !important;
		background: none;
		.avater {
			width: 200rpx;
			height: 200rpx;
		}
	}
</style>